<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Matrix Transformation with Three.js</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <!-- <script src="https://cdn.staticfile.net/three.js/0.160.0/three.min.js"></script> -->
    <!-- <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/three.js/110/three.min.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/three.js/0.160.0/three.min.js"></script>
    <script>
        // 场景、相机、渲染器
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        // const camera = new THREE.OrthographicCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 添加坐标轴辅助器
        const axesHelper = new THREE.AxesHelper(5);
        scene.add(axesHelper);

        // 创建一个立方体网格
        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        // 创建一个向量（箭头）
        const origin = new THREE.Vector3(0, 0, 0);
        const direction = new THREE.Vector3(1, 1, 1).normalize();
        const arrowHelper = new THREE.ArrowHelper(direction, origin, 2, 0xff0000);
        scene.add(arrowHelper);

        // 设置相机位置
        camera.position.z = 5;

        // 定义变换矩阵
        const m3 = new THREE.Matrix3(4,-1,6,2,1,6,2,-1,8);
        let m4 = new THREE.Matrix4()
        m4 = m4.setFromMatrix3(m3);
        // matrix.makeRotationZ(Math.PI / 4); // 绕 Z 轴旋转 45 度
        // matrix.scale(new THREE.Vector3(1.5, 1.5, 1.5)); // 缩放

        // 动画函数
        function animate() {
            requestAnimationFrame(animate);

            // 应用矩阵变换
            // cube.geometry.applyMatrix4(m4);
            // arrowHelper.setDirection(direction.applyMatrix4(m4).normalize());
            cube.rotation.x += 0.01
            cube.rotation.y += 0.01

            // 渲染场景
            renderer.render(scene, camera);
        }

        // 启动动画
        animate();

        // 窗口大小调整事件
        window.addEventListener('resize', () => {
            const width = window.innerWidth;
            const height = window.innerHeight;
            renderer.setSize(width, height);
            camera.aspect = width / height;
            camera.updateProjectionMatrix();
        });
    </script>
</body>
</html>